<template>
	
  <div class="container">
<!-- 搜索框 -->
<div  style="margin: 5px;">
<div class="mui-input-row mui-search" id="searchForm">
            <input type="search" id="searchInput" onkeyup="enterSearch(event)" class="mui-input-clear" placeholder="搜索商品">
        </div>
</div>
<!-- 搜索框 -->
    <swiper :imgdata="imgList" class="swip"></swiper>
    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
       <a  class="title">
       <img src="../assets/images/menu1.png" />
       <div class="mui-media-body">天猫新品</div>
       </a>
       
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
        <a href="#">
          <img src="../assets/images/menu2.png">
     <!--     <span class="mui-badge"></span> -->
          <div class="mui-media-body">今日爆款</div>
        </a>
      </li>
	  <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
	    <a href="#">
	      <img src="../assets/images/menu3.png">
	     <!-- <span class="mui-badge"></span> -->
	      <div class="mui-media-body">天猫国际</div>
	    </a>
	  </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
        <a href="#">
          <img src="../assets/images/menu4.png">
          <div class="mui-media-body">饿了么</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
        <a href="#">
          <img src="../assets/images/menu5.png">
          <div class="mui-media-body">充值中心</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
        <a href="#">
          <img src="../assets/images/menu6.png">
          <div class="mui-media-body">机票酒店</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
        <a href="#">
          <img src="../assets/images/menu7.png">
          <div class="mui-media-body">金币庄园</div>
        </a>
      </li>
	  <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
	    <a href="#">
	      <img src="../assets/images/menu8.png">
	      <div class="mui-media-body">阿里拍卖</div>
	    </a>
	  </li>
    </ul>
	
<!-- 服务列表 -->
	<div class="mui-row mui-content">
	<div class="mui-card-content mui-col-xs-6">
						<img src="http://doutuiya.gitee.io/vuezy/index/1.jpg" alt="" width="90%">
						
						<div class="mui-card-footer" style="background-color: #fff;">
									清仓特价 加厚纯棉老粗布凉席三件套 空调席 
										</div>
					</div>
	<div class="mui-card-content mui-col-xs-6">
						<img src="http://doutuiya.gitee.io/vuezy/index/2.jpg" alt="" width="90%">
						
						<div class="mui-card-footer" style="background-color: #fff;">
									自然而然 手工编织海草编环保桌面杂物化妆品收纳
										</div>
					</div>
	<div class="mui-card-content mui-col-xs-6">
						<img src="http://doutuiya.gitee.io/vuezy/index/3.jpg" alt="" width="90%">
						
						<div class="mui-card-footer" style="background-color: #fff;">
									定做儿童被套单件纯棉1.2m1.5米婴儿宝宝小
										</div>
	</div>
	<div class="mui-card-content mui-col-xs-6">
						<img src="http://doutuiya.gitee.io/vuezy/index/4.jpg" alt="" width="90%">
						
						<div class="mui-card-footer" style="background-color: #fff;">
									陶瓷公鸡摆设打鸣公鸡工艺装饰生肖鸡鸡年吉祥物
										</div>
	</div>
	<div class="mui-card-content mui-col-xs-6">
						<img src="http://doutuiya.gitee.io/vuezy/index/5.jpg" alt="" width="90%">
						
						<div class="mui-card-footer" style="background-color: #fff;">
									日式下午茶具陶瓷咖啡杯具套装客厅创意冷水壶茶壶
										</div>
	</div>
	<div class="mui-card-content mui-col-xs-6">
						<img src="http://doutuiya.gitee.io/vuezy/index/6.jpg" alt="" width="90%">
						
						<div class="mui-card-footer" style="background-color: #fff;">
									朗汀家用实用陶瓷碗8寸大面碗汤碗牛肉拉面碗和
										</div>
	</div>
	

	</div>
	
  </div>
</template>

<script>
import swiper from "../components/swiper";
export default {
  name: "Home",
  data() {
    return {
      imgList: [
        {
          id: 1,
          img:
            "http://doutuiya.gitee.io/vuezy/banner1.jpg"
        },
        {
          id: 2,
          img:
            "http://doutuiya.gitee.io/vuezy/banner2.jpg"
        },
        {
          id: 3,
          img:
            "http://doutuiya.gitee.io/vuezy/banner3.jpg"
        },
		{
		  id: 4,
		  img:
		    "http://doutuiya.gitee.io/vuezy/banner4.jpg"
		},
		{
		  id: 5,
		  img:
		    "http://doutuiya.gitee.io/vuezy/banner5.jpg"
		},
		{
		  id: 6,
		  img:
		    "http://doutuiya.gitee.io/vuezy/banner7.jpg"
		},
		{
		  id: 7,
		  img:
		    "http://doutuiya.gitee.io/vuezy/banner7.jpg"
		}
		
      ]
    };
  },
  components: {
    swiper: swiper
  }
};
</script>

<style scoped>
  .mui-grid-view{
    background-color: #fff;
  }
  .mui-grid-view  .mui-table-view-cell img{
    width:60px;
    height:30px;
  }
  .swip img{
	  padding-top: 0px;
	  height: 70%;
  }

</style>
